<template>
  <div class="amap-page-container">
    <div id="container" style="width:100vw;height:70vh"></div>
  </div>
</template>

<script>
  export default {
    data() {
      return {}
    },
    created() {
      // 配置
    },
    mounted() {
      this.$nextTick(() => {
        var map = new AMap.Map('container', {
          center: [116.397559, 39.89621],
          zoom: 14
        })
        // 定义图标信息
        var icon = new AMap.Icon({
          // 图标尺寸
          size: new AMap.Size(32, 46),
          // 图标的取图地址
          image:
            'http://a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-red.png',
          // 图标所用图片大小
          imageSize: new AMap.Size(32, 46)
        })
        // 文字描述内容
        var labelContent = '<span>1</span>'
        // 文字描述显示位置
        var labelOffset = new AMap.Pixel(8, 7)
        // 绘制坐标点
        var marker = new AMap.Marker({
          icon: icon,
          position: [116.303843, 39.983412],
          offset: new AMap.Pixel(-10, -46),
          title: 1,
          text: 1,
          label: {
            content: labelContent,
            offset: labelOffset
          }
        })
        marker.setMap(map)
        var labelContent = '<span>2</span>'
        var labelOffset = new AMap.Pixel(8, 7)
        var marker2 = new AMap.Marker({
          icon: icon,
          anchor: 'center', //设置锚点
          position: [116.321354, 39.896436],
          offset: new AMap.Pixel(-10, -28),
          title: 2,
          clickable: true,
          bubble: true,
          label: {
            content: labelContent,
            offset: labelOffset
          }
        })
        marker2.setMap(map)
        // 事件
        AMap.event.addListener(marker, 'click', function(e) {

          debugger
          //得到的数据
        })
        AMap.event.addListener(marker2, 'click', function(e) {
          debugger
          //得到的数据
        })

        // 绘制路线
        var truckDriving = new AMap.TruckDriving({
          map: map,
          policy: 0, // 规划策略
          size: 1, // 车型大小
          width: 2.5, // 宽度
          height: 2, // 高度
          load: 1, // 载重
          weight: 12, // 自重
          axlesNum: 2, // 轴数
          province: '京', // 车辆牌照省份
          isOutline: true,
          outlineColor: '#ffeeee',
          hideMarkers: true,
          showTraffic: true
        })
        var path = []
        path.push({ lnglat: [116.303843, 39.983412] }) //起点
        path.push({ lnglat: [116.321354, 39.896436] }) //途径
        path.push({ lnglat: [116.407012, 39.992093] }) //终点
        console.log(truckDriving)
        truckDriving.search(path, function(status, result) {
          console.log(status)
          console.log(result)
          // searchResult即是对应的驾车导航信息，相关数据结构文档请参考  https://lbs.amap.com/api/javascript-api/reference/route-search#m_DrivingResult
          if (status === 'complete') {
            console.log('获取货车规划数据成功')
          } else {
            console.log('获取货车规划数据失败：' + result)
          }
        })
      })
    },
    methods: {}
  }
</script>
<style>
  .amap-marker-label {
    border: 0px;
    background: rgba(255, 255, 255, 0);
    color: #fff;
    font-size: 17px;
    font-weight: 600;
    text-align: center;
  }
</style>